<template>
  <!-- 我的成交栏顶部界面 -->
  <div class="personHeadMoudle">
    <PersonHead />
  </div>

  <!-- 我的成交栏主体界面 -->
  <div class="personDataModule">
    <!-- 我的购物车界面导航 -->
    <div class="personMenuModule">
      <PersonMenu />
    </div>

    <!-- 我的成交栏界面导航 -->
    <div class="dataModule">
      <div class="personHandleModule">
        <span>商品查询:</span>
        <el-input
          v-model="offerIDSearch"
          style="width: 20%"
          placeholder="请输入商品订单号"
          clearable
        />
        <el-button type="primary" :icon="Search" @click="searchCart"
          >查询ID</el-button
        >
      </div>

      <div class="personTableModule">
        <el-table
          :data="tableData"
          :header-cell-style="{
            color: '#000',
            backgroundColor: '#e7f8fd',
            textAlign: 'center',
          }"
          :row-style="{ height: '90px' }"
          :cell-style="{
            textAlign: 'center',
          }"
        >
          <el-table-column property="offerID" width="160px" label="商品ID" />
          <el-table-column label="商品图片">
            <template #default="data">
              <img
                :src="data.row.offerImage"
                alt="商品展示图片"
                style="height: 60px; width: auto"
              />
            </template>
          </el-table-column>
          <el-table-column property="offerName" label="商品名称" />
          <el-table-column property="offerStyle" label="商品类别" />
          <el-table-column property="offerLocal" label="商品地址" />
          <el-table-column property="offerDegree" label="商品程度" />
          <el-table-column property="offerState" label="商品状态" />
          <el-table-column property="offerUser" label="售卖用户" />
          <el-table-column property="finalPrice" label="最终价格" />
          <el-table-column property="userLocal" label="收货地址" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="info" text @click="offerReceive(scope.row)"
                >确认收货</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页栏部分 -->
      <div class="pagiNation">
        <el-pagination
          :page-size="5"
          :pager-count="5"
          :current-page="pageNum.value"
          layout="prev, pager, next"
          :total="totalNum"
          @current-change="currentChange"
        />
      </div>
    </div>
  </div>

  <!-- 个人界面底栏 -->
  <div class="personButtomModule">
    <PersonButtom />
  </div>
</template>

<script>
import PersonHead from "@/components/PersonHead.vue";
import PersonMenu from "@/components/PersonMenu.vue";
import PersonButtom from "@/components/PersonButtom.vue";
import { ElMessage } from "element-plus";
import { ref, onMounted } from "vue";
import request from "@/request/axios";

export default {
  components: { PersonHead, PersonMenu, PersonButtom },
  setup() {
    let offerIDSearch = ref(null);
    let tableData = ref();
    let tableRow = ref();
    let pageNum = ref(1);
    let totalNum = ref(0);

    const recordTable = () => {
      request
        .post("/person/recordList", {
          pageNum: pageNum.value,
          pageSize: 5,
          cartUser: JSON.parse(localStorage.getItem("user")).data.userID,
          offerID: offerIDSearch.value,
        })
        .then((res) => {
          if (res.code === "200") {
            tableData.value = res.data.data;
            totalNum.value = res.data.total;
          } else {
            tableData.value = [];
            ElMessage.warning(res.msg);
          }
        });
    };

    onMounted(recordTable);

    const currentChange = (current) => {
      pageNum.value = current;
      recordTable();
    };

    return {
      offerIDSearch,
      tableData,
      tableRow,
      pageNum,
      totalNum,
      recordTable,
      currentChange,
    };
  },
};
</script>

<style>
body {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  margin: 0;
}

.dataModule {
  display: flex;
  flex-direction: column;
  width: 80%;
  height: 100%;
  background-color: #fff;
  border-inline: 2px solid #cacaca;
}
</style>